<template>
  <div>
    <el-card class="purchase-card">
      <div slot="header" class="purchase-header">
        <span>{{ purchase.title }}</span>
        <span>（采购单号: {{ purchase_id }}）</span>
      </div>
      <p class="purchase-title">采购信息</p>
      <div class="purchase-view">
        <p>发布时间：{{ purchase.create_time | unixToDate }}</p>
        <p>截止时间：{{ purchase.closing_date | unixToDate }}</p>
        <p>期望收货时间：{{ purchase.receiving_date | unixToDate }}</p>
        <p>采购单状态：正常</p>
      </div>
      <p class="purchase-title">采购要求</p>
      <div class="purchase-view">
        <p>（采购）收货地：{{ `${purchase.ship_province}-${purchase.ship_city}-${purchase.ship_county}` }}</p>
        <p>（供应）发货地：{{ `${purchase.seller_province}-${purchase.seller_city}-${purchase.seller_county}` }}</p>
        <p>发票要求：{{ purchase.need_receipt === 0 ? '无需发票' : '需要发票' }}</p>
      </div>
      <p class="purchase-title">联系方式</p>
      <div class="purchase-view">
        <p>联系人：{{ purchase.contact_name }}</p>
        <p>联系电话：{{ purchase.contact_num }}</p>
      </div>
      <p class="purchase-title">采购商品</p>
      <el-table :data="[purchase]">
        <el-table-column label="商品名称" prop="goods_names" />
        <el-table-column label="商品规格" prop="goods_sku" />
        <el-table-column label="采购数量">
          <template slot-scope="{ row }">
            <span>{{ row.goods_num + row.goods_unit }}</span>
          </template>
        </el-table-column>
        <el-table-column label="采购单价">
          <template slot-scope="{ row }">
            <span>{{ row.goods_price | unitPrice('￥') }}</span>
          </template>
        </el-table-column>
      </el-table>
      <div class="purchase-view">
        <p>补充说明：{{ purchase.purchase_explain || '无' }}</p>
      </div>

    </el-card>
    <el-card class="quotations-card">
      <div slot="header" class="quotations-header">
        <span>我的报价单</span>
      </div>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="数量：">
          <el-input v-model.number="form.goods_num" maxlength="8"></el-input>
        </el-form-item>
        <el-form-item label="商品单位：">
          <el-input v-model="form.goods_unit" placeholder="件/把/个/瓶..."></el-input>
        </el-form-item>
        <el-form-item label="单价：">
          <!--<el-tooltip v-if="purchase.price_type === 1" effect="dark" content="采购方设置了不可议价" placement="top">
            <el-input v-model="form.goods_price" disabled>
              <template slot="prepend">￥</template>
            </el-input>
          </el-tooltip>
          <el-input v-else v-model="form.goods_price">
            <template slot="prepend">￥</template>
          </el-input>-->
          <el-input v-model="form.goods_price" onkeyup="this.value=this.value.replace(/[^\d.]/g,'');" maxlength="8">
            <template slot="prepend">￥</template>
          </el-input>
        </el-form-item>
        <el-form-item label="价格类型">
          <el-radio-group v-model="form.price_type">
            <el-radio :label="0">可议价</el-radio>
            <el-radio :label="1">不可议价</el-radio>
            <el-radio :label="2">面议</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="标题：" prop="quotation_title">
          <el-input v-model="form.quotation_title"></el-input>
        </el-form-item>
        <el-form-item label="报价说明：">
          <el-input v-model="form.quotation_detail" type="textarea" :rows="4" resize="none" />
        </el-form-item>
        <el-form-item label="附件：" prop="quotation_file">
          <el-upload
            :action="MixinUploadApi"
            :on-remove="() => { form.quotation_file = '' }"
            :on-success="(res) => { form.quotation_file = res.url }"
            :limit="1"
          >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="公司名称：" prop="company">
          <el-input v-model="form.company"></el-input>
        </el-form-item>
        <el-form-item label="联系人：" prop="contact_name">
          <el-input v-model="form.contact_name"></el-input>
        </el-form-item>
        <el-form-item label="联系电话：" prop="contact_number">
          <el-input v-model="form.contact_number"></el-input>
        </el-form-item>
        <el-form-item label="我希望：">
          <el-date-picker v-model="form.reply_date" value-format="timestamp" />
          <span class="reply-date-tip">日前得到答复</span>
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" @click="handleAddQuotation">确认提交</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import * as API_Purchase from '@/api/purchase'
export default {
  name: 'addQuotations',
  data() {
    return {
      purchase_id: '',
      purchase: '',
      form: {
        // 报价单标题
        quotation_title: '',
        // 商品数量
        goods_num: '',
        // 商品单位
        goods_unit: '',
        // 商品单价
        goods_price: '',
        // 报价类型
        price_type: 0,
        // 报价说明
        quotation_detail: '',
        // 报价文件
        quotation_file: '',
        // 公司名称
        company: '',
        // 联系人
        contact_name: '',
        // 联系电话
        contact_number: '',
        // 期望答复日期
        reply_date: '',
        // 关联的采购单ID
        purchase_id: ''
      },
      rules: {
        quotation_title: this.MixinRequired('请填写报价单标题！'),
        quotation_file: this.MixinRequired('请填写报价文件！'),
        company: this.MixinRequired('请填写公司名称！'),
        contact_name: this.MixinRequired('联系人不能为空！'),
        contact_number: this.MixinRequired('请填写联系电话！')
      }
    }
  },
  mounted() {
    this.purchase_id = this.$route.query.purchase_id
    this.GET_PurchaseDetail()
  },
  methods: {
    /**
     * 获取采购单详情
     * @returns {Promise<void>}
     * @constructor
     */
    async GET_PurchaseDetail() {
      const res = await API_Purchase.getPurchaseDetail(this.purchase_id)
      this.purchase = res
    },
    /**
     * 添加报价单
     * @returns {Promise<void>}
     */
    handleAddQuotation() {
      this.$refs['form'].validate(async(valid) => {
        if (!valid) {
          this.$message.error('表单填写有误，请核对！')
          return false
        }
        const params = JSON.parse(JSON.stringify(this.form))
        params.purchase_id = this.purchase_id
        params.reply_date /= 1000
        await API_Purchase.addQuotations(params)
        this.$message.success('发布成功！')
        this.$router.push({ name: 'quotationsList' })
      })
    }
  }
}
</script>

<style type="text/scss" lang="scss" scoped>
.purchase-card {
  font-size: 14px;
  .purchase-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .purchase-title {
    position: relative;
    padding-left: 15px;
    margin: 0;
    &::before {
      content: ' ';
      position: absolute;
      left: 0;
      width: 4px;
      height: 100%;
      background-color: #EC4515;
      border-radius: 2px;
    }
  }
  .purchase-view {
    padding-left: 15px;
  }
}
.quotations-card {
  margin-top: 10px;
  /deep/ {
    .el-input {
      width: 300px;
    }
    .el-textarea,
    .el-upload-list {
      width: 500px;
    }
    .el-date-editor {
      width: 205px;
    }
    .reply-date-tip {
      margin-left: 5px;
      font-size: 14px;
    }
  }
}
</style>
